<div id="navbar" class="navbar navbar-default ace-save-state">
  <div class="navbar-container ace-save-state" id="navbar-container">

    <div class="navbar-header pull-left">
      <a href="#" class="navbar-brand">
        <small><i class="fa fa-leaf"></i>Ace Admin</small>
      </a>
    </div>

    <div class="navbar-buttons navbar-header pull-right" role="navigation">
      <ul class="nav ace-nav">
        <li class="grey dropdown-modal" *ngFor="let item of menuTree" (click)="selectTopMenu(item)">
          <a data-toggle="dropdown" class="dropdown-toggle" >{{item.menuName}}</a>
        </li>
        <li class="light-blue dropdown-modal">
          <a data-toggle="dropdown"  class="dropdown-toggle">
            <img class="nav-user-photo" src="../assets/avatars/user.jpg" alt="Jason's Photo" />
            <span class="user-info">
              <small>Welcome,</small> Jason
            </span>
            <i class="ace-icon fa fa-caret-down"></i>
          </a>

          <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
            <li>
              <a >
                <i class="ace-icon fa fa-cog"></i> Settings
              </a>
            </li>
            <li>
              <a href="profile.html">
                <i class="ace-icon fa fa-user"></i> Profile
              </a>
            </li>
            <li class="divider"></li>
            <li>
              <a >
                <i class="ace-icon fa fa-power-off"></i> Logout
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="main-container ace-save-state" id="main-container">
  
  <div id="sidebar" class="sidebar responsive ace-save-state">
    <div class="sidebar-shortcuts" id="sidebar-shortcuts">
      <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
        <button class="btn btn-success">
          <i class="ace-icon fa fa-signal"></i>
        </button>
        <button class="btn btn-info">
          <i class="ace-icon fa fa-pencil"></i>
        </button>
        <button class="btn btn-warning">
          <i class="ace-icon fa fa-users"></i>
        </button>
        <button class="btn btn-danger">
          <i class="ace-icon fa fa-cogs"></i>
        </button>
      </div>
    </div>

    <ul class="nav nav-list">
      <!-- <li class="">
        <a routerLink="/">
          <i class="menu-icon fa fa-list"></i>
          <span class="menu-text"> 我的工作台 </span>
        </a>
        <b class="arrow"></b>
      </li> -->

      <li class="" *ngFor="let item of selectedTopMenu.children" [ngClass]="{'selected': selectedAccordionMenu==item}">
        <a class="dropdown-toggle" (click)="selectAccordionMenu(item)">
          <i class="menu-icon fa fa-list"></i>
          <span class="menu-text"> {{item.menuName}} </span>
          <b class="arrow fa fa-angle-down"></b>
        </a>
        <b class="arrow"></b>

        <ul class="submenu" [@slide]="item.state">
          <li class="" *ngFor="let subItem of item.children" [ngClass]="{'active': selectedAccordionSubMenu==subItem}">
            <a (click)="selectAccordionSubMenu(subItem)" [routerLink]="[subItem.funcAction]">
              <i class="menu-icon fa fa-caret-right"></i> {{subItem.menuName}} 
            </a>
            <b class="arrow"></b>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="main-content">
    <div class="main-content-inner">
      <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
          <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a >Home</a>
          </li>
          <li>
            <a >Other Pages</a>
          </li>
          <li class="active">Blank Page</li>
        </ul>

        <div class="nav-search" id="nav-search">
          <form class="form-search">
            <span class="input-icon">
              <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
              <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
          </form>
        </div>
      </div>

      <div class="page-content">
        <div class="row">
          <div class="col-xs-12">
            <router-outlet></router-outlet>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="footer-inner">
      <div class="footer-content">
        <span class="bigger-120">
          <span class="blue bolder">Ace</span> Application &copy; 2013-2014  &nbsp; &nbsp;
        </span>
        <span class="action-buttons">
          <a ><i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i></a>
          <a ><i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i></a>
          <a ><i class="ace-icon fa fa-rss-square orange bigger-150"></i></a>
        </span>
      </div>
    </div>
  </div>
</div>

